<template>
  <div>
    <template v-if="msgList.length == 0">
      <el-empty :image-size="280">
        <div slot="description">
          <b class="">暂无记录</b>
        </div>
      </el-empty>
    </template>
    <template v-else>
      <div v-if="msgList.length > 0" class="msgList" ref="box">
        <div v-for="(msg, k) in msgList" :key="k" class="msg">
          <div class="timeShow">
            <span class="time">{{ msg.发送时间 }}</span>
          </div>
          <!-- <pre>{{ msg }}</pre> -->
          <div :class="['msgBox', msg.is对方发出 ? 'isCus' : 'isMe']">
            <el-image
              class="face"
              :src="msg.is对方发出 ? msg.face : ''"
              fit="cover"
            >
              <div slot="error" class="image-slot">
                <i class="fa fa-user" v-if="msg.群id == null"></i>
                <i class="fa fa-users" v-else></i>
              </div>
            </el-image>
            <div class="esName">
              {{ msg.发送方Name }}
              <!-- {{ msg.is对方发出 ? msg.cusName : msg.发送方 }} -->
            </div>
            <div class="msgBody">
              <WxText
                v-if="msg.msgType == 'text'"
                :isMe="!msg.is对方发出"
                :obj="msg.content"
              ></WxText>
              <WxImage
                v-if="['image', 'emotion'].includes(msg.msgType)"
                :isMe="!msg.is对方发出"
                :obj="msg.content"
              ></WxImage>
              <WxVideo
                v-if="msg.msgType == 'video'"
                :isMe="!msg.is对方发出"
                :obj="msg.video"
                :allowPlay="true"
              ></WxVideo>
              <WxFile
                v-if="msg.msgType == 'file'"
                :isMe="!msg.is对方发出"
                :obj="msg.file"
              ></WxFile>
              <WxMpnews
                v-if="msg.msgType == 'mpnews'"
                :isMe="!msg.is对方发出"
                :obj="msg.mpnews"
              ></WxMpnews>
              <WxVoice
                v-if="['voice', 'meeting_voice_call'].includes(msg.msgType)"
                :isMe="!msg.is对方发出"
                :obj="msg.content"
              ></WxVoice>
              <WxLink
                v-if="msg.msgType == 'link'"
                :isMe="!msg.is对方发出"
                :obj="msg.link"
              ></WxLink>
              <slot name="suffix" :data="msg"></slot>
            </div>
          </div>
          <!-- <pre>{{ msg }}</pre> -->
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'wxStyleMsg',
  // prettier-ignore
  components: {
    WxText:   () => { return import('./wx_messageArea/wx_text.vue') },
    // WxText2:  () => { return import('./wx_messageArea/wx_text_gupin.vue') },
    WxMpnews: () => { return import('./wx_messageArea/wx_mpnews.vue') },
    WxImage:  () => { return import('./wx_messageArea/wx_image.vue') },
    WxVideo:  () => { return import('./wx_messageArea/wx_video.vue') },
    WxFile:   () => { return import('./wx_messageArea/wx_file.vue') },
    WxVoice:  () => { return import('./wx_messageArea/wx_voice.vue') },
    WxLink:   () => { return import('./wx_messageArea/wx_link.vue') },
  },
  props: {
    msgList: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    scrollTop: function() {
      if (this.$refs.box) {
        this.$refs.box.scrollTop = 0;
      }
    },

    reMsgFace: function() {},
  },
};
</script>

<style scoped lang="less">
@import url('../assets/config.less');
@defPadding: 12px;
.msgList {
  height: 100%;
  max-height: 80vh;
  width: 100%;
  overflow-y: scroll;
  .timeShow {
    text-align: center;
    .time {
      display: inline-block;
      font-size: 12px;
      margin: 24px auto;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: #d9d9d9;
    }
  }
  .item + .item {
    margin-top: unit((@defPadding), px);
  }
  .msgBox {
    @faceW: 40;
    position: relative;
    margin: 0 unit((@defPadding / 2), px);
    .face {
      font-size: 36px;
      text-align: center;
      position: absolute;
      top: 0;
      width: unit(@faceW, px);
      height: unit(@faceW, px);
      border-radius: 50%;
      color: @baseGrey;
    }
    &.isMe {
      text-align: right;
      padding-right: unit((@faceW + @defPadding), px);
      .face {
        right: 0;
      }
    }
    &.isCus {
      text-align: left;
      padding-left: unit((@faceW + @defPadding), px);
      .face {
        left: 0;
      }
    }
    .esName {
      font-size: 14px;
      margin-bottom: 8px;
      color: #666;
    }
  }
}
</style>
